<template>
  <view class="container">
    <view class="product-list">
      <view class="product-item" v-for="(product, index) in currentProducts" :key="index" @click="navigateToDetail(product)">
        <image :src="product.image" mode="aspectFill" class="product-image"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-desc">{{ product.description }}</text>
          <view class="price-section">
            <text class="product-price">¥{{ product.price }}</text>
            <text class="product-sales">已售 {{ product.sales }}件</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProductList } from '@/api/product.js';
export default {
  data() {
    return {
      currentProducts: [],
      currentCategory: '',
      pageIndex: 1,
      pageSize: 10,
      totalPages: 1
    };
  },
  async onLoad(options) {
    if (options.category) {
      this.currentCategory = options.category;
      await this.fetchProducts();
      // 设置页面标题
      const titleMap = {
        fruit: '水果专区',
        vegetable: '蔬菜专区',
        seasoning: '调味专区',
        oil: '粮油专区',
        meat: '肉蛋专区',
        handicraft: '手工艺专区',
        dairy: '奶制品专区',
        medicine: '药材专区',
        processed: '加工品专区'
      };
      uni.setNavigationBarTitle({
        title: titleMap[this.currentCategory] || '商品列表'
      });
    }
  },
  methods: {
    async fetchProducts() {
      try {
        const params = {
          page_index: this.pageIndex,
          page_size: this.pageSize,
          category: this.currentCategory
        };
        const response = await getProductList(params);
        if (response && response.data && response.data.data && response.data.data.list) {
          this.currentProducts = response.data.data.list.map(product => ({
            id: product.id,
            name: product.name,
            price: product.price,
            image: product.image || '/static/images/4.png',
            description: product.description,
            sales: product.sales || 0
          }));
          this.totalPages = Math.ceil(response.data.data.total_item_count / this.pageSize);
        } else {
          uni.showToast({ title: '获取商品失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '网络错误', icon: 'none' });
      }
    },
    navigateToDetail(product) {
      uni.navigateTo({
        url: `/pages/spxq/detail?productInfo=${encodeURIComponent(JSON.stringify(product))}`,
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-item {
  display: flex;
  background: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.product-sales {
  font-size: 24rpx;
  color: #999;
}
</style> 